<template>
  <div
    v-if="show"
    class="fixed top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4 w-full pc:w-1/5 px-5 py-5 z-50 border rounded-2xl bg-white mobile:min-h-full dark:bg-dark-background dark:text-white"
  >
    <div class="font-bold">{{ i18nStore.translate('保存到') }}:</div>
    <div class="my-3 overflow-hidden" v-if="prop.isMove">
      {{ i18nStore.translate('当前位置') }}：{{ prop.path }}
    </div>

    <el-tree-select
      v-model="value"
      lazy
      :placeholder="i18nStore.translate('/')"
      :load="load"
      :props="props"
      check-strictly
    />

    <div class="w-full flex justify-around my-5">
      <MyButton
        class="bg-[#00e0a9] flex-1 text-center h-[35px] leading-[35px] rounded-xl mr-1 font-bold text-white"
        @click="Cancel"
      >
        {{ i18nStore.translate('cancel') }}
      </MyButton>
      <MyButton
        class="bg-[#00e1d9] flex-1 text-center h-[35px] leading-[35px] rounded-xl ml-1 font-bold text-white"
        @click="
          () => {
            prop.isMove ? moveFile() : transferToPersonals();
          }
        "
      >
        {{ i18nStore.translate('move') }}
      </MyButton>
    </div>
  </div>
</template>

<script setup>
import { getBigFileList, movetoFolder, transferToPersonal } from '@/apis/file';
import {
  useFileStore,
  useUserInfoStore,
  useI18nStore,
  useToastStore
} from '@/stores';
const toastStore = useToastStore();
const userInfo = useUserInfoStore();
const i18nStore = useI18nStore();

const prop = defineProps({
  path: {
    type: String
  },
  id: {
    type: Number
  },
  isMove: {
    type: Number
  },
  ids: {
    type: Array
  },
  pid: {
    type: String
  }
});

const fileStore = useFileStore();
const value = ref();
const show = ref(true);

const props = {
  label: 'label',
  children: 'children',
  isLeaf: 'isLeaf'
};

const getRreeData = async (prefix) => {
  const res = await getBigFileList({ isRubbish: false, prefix: prefix });
  return res.data.list.filter((item) => item.isFolder);
};

const load = async (node, resolve) => {
  const parameter = node.data.path
    ? node.data.path + node.data.label + '/'
    : '';
  const dataList = await getRreeData(parameter);
  if (dataList.length === 0) return resolve([]);
  const children = dataList.map((item) => {
    return {
      label: item.name,
      path: item.path,
      value: parameter + item.name + '/' + '.' + item.id
    };
  });
  resolve(children);
};

const transferToPersonals = () => {
  if (userInfo.okCloudDiskToken) {
    const folderPath = value.value
      ? value.value.split('.').slice(0, -1).join('/')
      : '/';
    transferToPersonal({
      ids: prop.ids,
      pid: prop.pid,
      targetFolder: folderPath
    }).then((res) => {
      if (res.code === 0) {
        toastStore.showToast({
          severity: 'success',
          summary: 'Success Message',
          detail: i18nStore.translate('保存成功')
        });
        setTimeout(() => {
          router.push('www.okpan.com');
        }, 1500);
      } else {
        toastStore.showToast({
          severity: 'error',
          summary: 'Error Message',
          detail: res.msg
        });
      }
      Cancel();
    });
  } else {
    toastStore.showToast({
      severity: 'error',
      detail: i18nStore.translate('请先登录')
    });
  }
};

const moveFile = async () => {
  const folderPath = value.value
    ? value.value.split('.').slice(0, -1).join('/')
    : '/';
  await movetoFolder({
    id: prop.id,
    folderPath
  });
  fileStore.updateFileList();
  Cancel();
};

const Cancel = () => {
  setTimeout(() => {
    show.value = false;
  }, 500);
};
</script>
